<template>
  <div>
    <input type="text" v-model="name">
    <h1 v-color ref="qqq">{{ name }}</h1>
    <h1 v-permission="3" v-if="flag">{{ name }}</h1>
    <ul>
      <li v-for="item in ary" ref="li">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
import Vue from 'vue'
export default {
  name: 'XXX',
  data() {
    return {
      name: "珠峰",
      col: 'red',
      flag: true,
      ary: [11, 222, 333]
    }
  },
  created() {
    setTimeout(() => {
      this.flag = false
    }, 3000);
  },
  mounted() {
    // console.log(this.$refs.li.length)
    // Vue的DOM更新是一个异步操作
    this.ary.push(444)
    this.$nextTick(() => {
      console.log(this.$refs.li.length)
    })
    this.ary.push(555)
    this.$nextTick(function () {
      console.log(this.$refs.li.length)
    })
    console.log(this.$nextTick)
    //  Vue.prototype.$nextTick = function(cb){return nextTick(cb,this)}
    console.log(Vue.nextTick === this.$nextTick)
    console.log(Vue.prototype.$nextTick === this.$nextTick)

  }
}
</script>
<style lang="less">
</style>